<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三3三博客社区</title>
    <link rel="icon" href="../../images/icon.jpg" sizes="32x32">
    <!-- 引入 ECharts 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>

<!--    获取本机ip-->
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <style>
        .div1{
            width:1200px;height:800px;  /*设置div的大小*/
            /*border:1px solid green;    !*边框*!*/
            overflow:hidden;
            margin:0 auto;
        }
        .div2{
            margin: 10px 0;
            /*border-style:dashed;*/
            height :80%;
            width:75%;
            margin:5% auto;
        }

    </style>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<div class="div1">
    <a href="../main.html">
        <button style="position: absolute;top: 50px;right: 150px" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
            返回主页
        </button>
    </a>

    <button onclick="downPdfFile()" style="position: absolute;top: 100px;right: 103px" type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
        统计数据pdf下载
    </button>

    <div id="main" class="div2"></div>

</div>

<script src="../../assets/js/jquery.min.js"></script>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));
    var topFive = [];
    var topFive_data = [];
    readerInfo();
    function readerInfo() {
        <!--    获取本机ip-->
        // alert(returnCitySN['cip'] + returnCitySN['cname']);
        $.ajaxSettings.async = false;
        $.ajax({
                type: 'POST',
                url:"/api/momentDate/getReadInfo",
                success: function (d) {
                    if (d.code == 200){
                        let m = d.data;
                        for(var i=0;i<m.length;i++){
                            topFive_data.push({name:m[i].title,value:m[i].views});
                            topFive.push(m[i].title);
                        }
                    }else {
                        alert(d.message)
                    }
                }
            }
        )
    }

    var option = {
        backgroundColor: "#DDDDDD",
        title: {
            text: '博客访问情况',
            subtext: '总计',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: topFive
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: topFive_data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    myChart.setOption(option);

    function downPdfFile() {
        location.href="/api/momentDate/downPdfFile";
    }
</script>
</body>
</html>